<div class="content-heading">
    <div>
        ☁️ {{ 'general.api-resource' | translate }} - <b>Secrets</b>
        <small><b [innerHTML]="'apiResource.secret-description' | translate"></b></small>
    </div>
</div>

<div class="card card-default">
    <div class="card-body">
        <a [routerLink]="[ '/api-resource', resourceName, 'edit']" class="btn btn-outline-primary">{{ 'general.goback' | translate }}</a>
    </div>
</div>

<div *ngIf="errors.length > 0">
    <alert type="danger">
        <div *ngFor="let error of errors; let i = index"><strong>{{i+1}}</strong> {{error}}</div>
    </alert>
</div>
<app-loading *ngIf="showButtonLoading"></app-loading>

<div class="card card-default" *ngIf="apiSecrets && apiSecrets.length > 0" [hidden]="showButtonLoading">
    <div class="card-header">
        <h3>{{ resourceName }}</h3>
    </div>
    <div class="card-body">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th></th>
                    <th>{{ 'secrets.secretValue' | translate }}</th>
                    <th>{{ 'secrets.secretType' | translate }}</th>
                    <th>{{ 'secrets.expiration' | translate }}</th>
                    <th>{{ 'secrets.description' | translate }}</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let secret of apiSecrets">
                    <td><button class="btn btn-danger btn-xs" (click)="remove(secret)"><i class="fa fa-times"></i></button></td>
                    <td>{{secret.value}}</td>
                    <td>{{secret.type}}</td>
                    <td>{{secret.expiration}}</td>
                    <td>{{secret.description}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="card card-default" [hidden]="showButtonLoading">
    <div class="card-header">
        <h3>{{ resourceName }}</h3>
    </div>
    <div class="card-body">
        <!--Select-->
        <fieldset>
            <div class="form-group row">
                <label placement="top" [tooltip]="'secrets.secretType-tooltip' | translate" class="col-xl-3 col-form-label">{{
                    'secrets.secretType' | translate }} <i class="fa fa-comment-dots"></i></label>
                <div class="col-xl-9">
                    <ng-select [items]="secretTypes" [(ngModel)]="model.type" bindValue="id" bindLabel="text" [placeholder]="'secrets.secretType-tooltip' | translate"></ng-select>
                </div>
            </div>
        </fieldset>
        <!--Input - text -->
        <fieldset>
            <div class="form-group row">
                <label placement="top" [tooltip]="'secrets.secretValue-tooltip' | translate" class="col-xl-3 col-form-label">{{
                    'secrets.secretValue' | translate }} <i class="fa fa-comment-dots"></i></label>
                <div class="col-xl-9">
                    <input class="form-control" autocomplete="secret-value" [placeholder]="'secrets.secretValue-tooltip' | translate" [(ngModel)]="model.value" />
                </div>
            </div>
        </fieldset>
        <!--Select-->
        <fieldset>
            <div class="form-group row">
                <label placement="top" [tooltip]="'secrets.hashType-tooltip' | translate" class="col-xl-3 col-form-label">{{
                    'secrets.hashType' | translate }} <i class="fa fa-comment-dots"></i></label>
                <div class="col-xl-9">
                    <ng-select [items]="hashTypes" [(ngModel)]="model.hashType" bindValue="id" bindLabel="text" [placeholder]="'secrets.hashType-tooltip' | translate"></ng-select>
                </div>
            </div>
        </fieldset>
        <!--Select-->
        <fieldset>
            <div class="form-group row">
                <label placement="top" [tooltip]="'secrets.description-tooltip' | translate" class="col-xl-3 col-form-label">{{
                    'secrets.description' | translate }} <i class="fa fa-comment-dots"></i></label>
                <div class="col-xl-9">
                    <input class="form-control" autocomplete="secret-description" [placeholder]="'secrets.description-tooltip' | translate" [(ngModel)]="model.description" />
                </div>
            </div>
        </fieldset>

        <!--Datepicker-->
        <fieldset>
            <div class="form-group row mb">
                <label placement="top" [tooltip]="'secrets.expiration-tooltip' | translate" class="col-xl-3 col-form-label">{{
                    'secrets.expiration' | translate }} <i class="fa fa-comment-dots"></i></label>
                <div class="col-xl-9">
                    <input type="text" class="form-control" #dp="bsDatepicker" bsDatepicker [(bsValue)]="model.expiration" name="dp-basic" [bsConfig]="bsConfig">
                </div>
            </div>
        </fieldset>

    </div>
    <div class="card-footer">
        <button class="mb-1 btn btn-primary" (click)="save()" type="button">Save</button>
        <a class="mb-1 btn btn-secondary" [routerLink]="['/api-resource', resourceName, 'edit']">Cancel</a>
    </div>
</div>

<div *ngIf="errors.length > 0">
    <alert type="danger">
        <div *ngFor="let error of errors; let i = index"><strong>{{i+1}}</strong> {{error}}</div>
    </alert>
</div>
<toaster-container [toasterconfig]="toasterconfig"></toaster-container>